<template>
    <Teleport to="#before-navigation" v-if="targetExists">
        <QuizNav
            :quizList="
                answerInfo.questions.map(item => {
                    return { id: item.id, isMark: item.isMark }
                })
            "
            :anchorTag="anchorTag"
            v-loading="loading"
            :quizId="answerInfo.quiz_id"
            :isAnswer="false"
            :isReview="false"
            :isNew="false"
        />
    </Teleport>

    <div v-loading="loading">
        <h2>{{ quizInfo?.title }}</h2>
        <h3>{{ $t('mod.quiz.summary.title') }}</h3>
        <el-table :data="answerInfo.questions" stripe>
            <el-table-column :label="$t('mod.quiz.summary.table_question')" width="280">
                <template #default="{ row, column, $index }">
                    <span>{{ $index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('mod.quiz.summary.table_status')">
                <template #default="{ row }">
                    <span v-if="row.question_type === 1">
                        {{ answerInfo.user_answer.find(item => item.question_id == row.id)?.selected_option_ids ? $t('mod.quiz.summary.status_saved') : $t('mod.quiz.summary.status_not_answered') }}
                    </span>
                    <span v-else>
                        {{
                            answerInfo.user_answer.find(item => item.question_id == row.id)?.selected_option_ids.length === 0
                                ? $t('mod.quiz.summary.status_not_answered')
                                : $t('mod.quiz.summary.status_saved')
                        }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div class="btn-list">
            <el-button color="#F06423" @click="router.go(-1)" :loading="saveLoading">{{ $t('mod.quiz.summary.btn_back') }}</el-button>
            <el-button color="#F06423" @click="submitHandle" :loading="saveLoading">{{ $t('mod.quiz.summary.btn_submit') }}</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

import QuizNav from '@/components/QuizNav.vue'

import QuizService from '@/api/quiz'
import type { AnswerItem, QuizInfo } from '@/types/quiz'

const route = useRoute()
const router = useRouter()
const anchorTag = ref('quiz')
const courseId = computed(() => Number(route.params.courseId))
const unitId = computed(() => Number(route.params.unitId))
const quizId = computed(() => Number(route.params.quizId))
const recordId = computed(() => Number(route.params.recordId))
const loading = ref(false)
const saveLoading = ref(false)
const targetExists = ref(false)
const { locale } = useI18n<{ message: MessageSchema }, SupportedLocales>()

const answerInfo = ref<AnswerItem>({
    id: 0,
    quiz_id: 0,
    student_id: 0,
    total_score: '',
    actual_score: '',
    status: 1,
    start_time: '',
    end_time: '',
    duration: '',
    questions: [],
    user_answer: [],
    grade_answer: [],
    status_text: '',
})
function getAnswer() {
    loading.value = true
    QuizService.recordById(recordId.value)
        .then(res => {
            answerInfo.value = res
            getQuizInfo()
        })
        .finally(() => {
            loading.value = false
        })
}

const submitHandle = () => {
    saveLoading.value = true

    const data = {
        action: 'submit',
        answers: answerInfo.value.user_answer,
    }
    QuizService.saveRecord(recordId.value, data)
        .then(res => {
            if (res.id)
                router.push({
                    name: 'quizReview',
                    params: {
                        courseId: courseId.value,
                        unitId: unitId.value,
                        quizId: quizId.value,
                        recordId: res.id,
                    },
                })
        })
        .finally(() => {
            saveLoading.value = false
        })
}

const quizInfo = ref<QuizInfo>()
function getQuizInfo() {
    QuizService.getById(answerInfo.value.quiz_id).then(res => {
        quizInfo.value = res
    })
}

onMounted(() => {
    getAnswer()
    targetExists.value = !!document.querySelector('#before-navigation')
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

h3 {
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

.btn-list {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}
</style>
